<template>
	<view class="container">
		<view class="page-title">联系客服</view>
		<view class="contact-card">
			<view class="contact-item" @tap="callPhone1" hover-class="item-hover">
				<view class="icon-circle phone-icon">
					<text class="icon-text">电</text>
				</view>
				<view class="contact-info">
					<text class="label">联系电话1:</text>
					<text class="value">{{appProperties.lianxidianhua1}}</text>
				</view>
				<view class="action-btn call-btn">
					<text>拨打</text>
				</view>
			</view>
			<view class="divider"></view>
			<view class="contact-item" @tap="callPhone2" hover-class="item-hover">
				<view class="icon-circle phone-icon">
					<text class="icon-text">电</text>
				</view>
				<view class="contact-info">
					<text class="label">联系电话2:</text>
					<text class="value">{{appProperties.lianxidianhua2}}</text>
				</view>
				<view class="action-btn call-btn">
					<text>拨打</text>
				</view>
			</view>
			<view class="divider"></view>
			<view class="contact-item" @tap="setClipboardData" hover-class="item-hover">
				<view class="icon-circle qq-icon">
					<text class="icon-text">Q</text>
				</view>
				<view class="contact-info">
					<text class="label">联系QQ:</text>
					<text class="value">{{appProperties.lianxiQQ}}</text>
				</view>
				<view class="action-btn copy-btn">
					<text>复制</text>
				</view>
			</view>
		</view>
		

	</view>
</template>

<script>
	import { mapState } from 'vuex';
export default {
	data() {
		return {
			
		};
	},
	computed: {
		...mapState(['appProperties'])
	},
	onShow() {
	},
	methods: {
		// 拨打电话
		callPhone1() {
			const tel = this.appProperties.lianxidianhua1 + ''
			console.log("打电话1: " + tel)
			uni.makePhoneCall({
			    phoneNumber: '' + tel   
			});
		},
		callPhone2() {
			let tel = this.appProperties.lianxidianhua2 + '';
			console.log("打电话2: " + tel)
			uni.makePhoneCall({
				phoneNumber: '' + tel
			});
		},
		// 复制内容到剪切板
		setClipboardData() {
			let qq = this.appProperties.lianxiQQ + '';
			uni.setClipboardData({
				data: '' + qq,
				success: function() {
					uni.showToast({
						title: 'QQ号已复制',
						icon: 'success'
					});
				}
			});
		}
	}
};
</script>

<style>
.container {
	padding: 30rpx;
	background-color: #f8f8f8;
	min-height: 100vh;
}

.page-title {
	font-size: 48rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 40rpx;
	padding-left: 20rpx;
	position: relative;
}

.page-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 15rpx;
	height: 40rpx;
	width: 8rpx;
	background: linear-gradient(to bottom, #07c160, #10ad7a);
	border-radius: 4rpx;
}

.contact-card {
	background-color: #ffffff;
	border-radius: 20rpx;
	box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
	padding: 10rpx 0;
	margin-bottom: 40rpx;
	overflow: hidden;
}

.contact-item {
	display: flex;
	align-items: center;
	padding: 36rpx 40rpx;
	position: relative;
	transition: background-color 0.2s;
}

.item-hover {
	background-color: #f9f9f9;
}

.contact-info {
	flex: 1;
	margin-left: 30rpx;
}

.label {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 8rpx;
}

.value {
	font-size: 34rpx;
	color: #333;
	font-weight: 500;
}

.divider {
	height: 1rpx;
	background-color: #f2f2f2;
	margin: 0 40rpx;
}

.icon-circle {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
}

.phone-icon {
	background: linear-gradient(135deg, #07c160, #10ad7a);
	color: white;
}

.qq-icon {
	background: linear-gradient(135deg, #12b7f5, #0e9fd8);
	color: white;
}

.icon-text {
	font-size: 36rpx;
	font-weight: bold;
}

.action-btn {
	padding: 10rpx 24rpx;
	border-radius: 30rpx;
	font-size: 26rpx;
	font-weight: 500;
}

.call-btn {
	background-color: rgba(7, 193, 96, 0.1);
	color: #07c160;
}

.copy-btn {
	background-color: rgba(18, 183, 245, 0.1);
	color: #12b7f5;
}

.service-hours {
	background-color: #ffffff;
	border-radius: 20rpx;
	box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
	padding: 30rpx;
	margin-bottom: 40rpx;
}

.hours-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	position: relative;
	padding-left: 20rpx;
}

.hours-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 10rpx;
	height: 30rpx;
	width: 6rpx;
	background: linear-gradient(to bottom, #f5a623, #f8c169);
	border-radius: 3rpx;
}

.hours-content {
	font-size: 28rpx;
	color: #666;
	padding: 8rpx 0;
}

.tips {
	text-align: center;
	font-size: 26rpx;
	color: #999;
	margin-top: 30rpx;
}
</style>
